import React, { useState, useEffect, useMemo } from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';

import Loading from '@kuiper-components/loading';

import * as formatter from '../../../../../common/formatter';
import Counts from './Counts';
// import Stats from './Stats';
import s from './Overview.module.css';
import notification from '@kuiper-components/notification';
import fetch from 'API/fetch';
import CopyBoard from '../../../../components/CopyBoard';
import { Link } from 'react-router-dom';

export default function Overview({ className }) {
	useEffect(() => {
		getAlertData();
	}, []);
	const [loading, setLoading] = useState(true);
	const [data, setData] = useState([]);
	const getAlertData = () => {
		const url = '/api/v2/alerts/detail_summary';
		try {
			fetch(url, {
				method: 'GET',
			})
				.then(res => {
					if (res.code === 200) {
						setLoading(false);
						setData(res.data);
					}
				})
				.catch(e => {
					notification.error({
						message: e.message,
						placement: 'top',
					});
				});
		} catch (err) {
			console.error('获取告警数据失败');
		}
	};

	const alertTotalCounts = useMemo(
		() => [
			{
				color: '#8ED5F1',
				label: '可用性',
				count: data?.aviliableCount,
			},
			{
				color: '#52A6FA',
				label: 'Web漏洞',
				count: data?.vulCount,
			},
			{
				color: '#A4A8D6',
				label: 'SSL安全',
				count: data?.sslCount,
			},
			{
				color: '#7DA9FC',
				label: '安全事件',
				count: data?.securityEventCount,
			},
			{
				color: '#7380FB',
				label: '内容违规',
				count: data?.contentCount,
			},
			{
				color: '#fbc973',
				label: '篡改事件',
				count: data?.changeCheckCount,
			},
			{
				color: '#8FA5B8',
				label: '资产变动',
				count: data?.assetCount,
			},
			{
				color: '#8FA5B8',
				label: '主机漏洞',
				count: data?.assetCount,
			},
		],
		[data]
	);
	const alertTodayCounts = useMemo(
		() => [
			{
				color: '#8ED5F1',
				label: '可用性',
				count: data?.aviliableTodayCount,
			},
			{
				color: '#52A6FA',
				label: 'Web漏洞',
				count: data?.vulTodayCount,
			},
			{
				color: '#A4A8D6',
				label: 'SSL安全',
				count: data?.sslTodayCount,
			},
			{
				color: '#7DA9FC',
				label: '安全事件',
				count: data?.securityEventTodayCount,
			},
			{
				color: '#7380FB',
				label: '内容违规',
				count: data?.contentTodayCount,
			},
			{
				color: '#fbc973',
				label: '篡改事件',
				count: data?.changeCheckTodayCount,
			},
			{
				color: '#8FA5B8',
				label: '资产变动',
				count: data?.assetTodayCount,
			},
			{
				color: '#8FA5B8',
				label: '主机漏洞',
				count: data?.assetCount,
			},
		],
		[data]
	);

	return (
		<Loading show={loading}>
			<div className={cn(className, s.overview)}>
				<Counts
					className={s.item}
					title="总告警次数"
					total={data?.totalCount}
					data={alertTotalCounts}
				/>
				<Counts
					className={s.item}
					title="今日告警次数"
					total={data?.todayCount}
					data={alertTodayCounts}
				/>
				<div className={cn(s.item, s.todayTopAsset)}>
					<div className={s.content}>
						<div className={cn(s.df, s.w100p)}>
							<p className={s.title}>今日资产告警次数TOP1</p>
							<p className={s.total}>
								{formatter.number(data?.AlertTodayTopAsset?.count)}
							</p>
						</div>
					</div>
					<div className={s.content2}>
						<div className={s.mt10}>
							<div>
								<svg
									className={s.vam}
									width="14px"
									height="14px"
									viewBox="0 0 14 14"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									xlink="http://www.w3.org/1999/xlink"
								>
									<g
										id="页面-1"
										stroke="none"
										strokeWidth="1"
										fill="none"
										fillRule="evenodd"
									>
										<g
											id="告警列表-资产变动"
											transform="translate(-1048.000000, -244.000000)"
											fill="#9A9FA9"
										>
											<g
												id="3.Icon/1.线性/2.业务安全类/态势感知"
												transform="translate(1048.000000, 244.000000)"
											>
												<path
													d="M7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 Z M4.95138136,1.6292776 L5.01259661,1.72891632 C5.4965797,1.92721691 5.85621931,2.21929512 5.9882147,2.63054905 C6.08186595,2.88877996 6.03286616,3.24108043 5.87103736,3.48612994 C5.74164609,3.76775888 5.58547719,4.05353292 5.49275375,4.21500008 C5.22876297,4.65458267 4.92555617,4.95154513 4.5305265,5.08439676 C4.25796127,5.16896566 4.34401127,5.10100321 3.94706862,5.2953964 C3.55012597,5.48978959 3.2440497,5.5464469 2.71511166,5.45169243 C2.60224604,5.43117858 2.43773005,5.48490534 2.2206072,5.60603476 C1.83223516,5.83312861 1.46425247,6.14330237 1.34255092,6.14330237 C1.31298693,6.33196577 1.28229216,6.71280604 1.27272727,7 C1.27272727,10.9203323 4.81568843,13.0419399 7.4210342,12.6960135 C7.50650777,11.9756605 7.68186397,11.300657 7.94710278,10.6710031 C8.20918058,9.98427736 8.48656219,9.74494906 9.19723302,9.80062953 C9.33276569,9.82038498 10.1288526,9.10804273 10.1288526,9.10804273 C9.14764061,8.58933512 8.3956958,7.43958259 8.13648747,6.83784287 L7.21730219,6.33769556 C6.73140612,6.06515436 6.48845809,5.84927046 6.34211538,5.5210488 C6.02169179,4.80599445 6.17186046,4.01963004 6.61949699,3.44817267 C7.00783125,2.95193277 7.65154789,2.98319197 8.27230881,3.24108043 C9.86033761,3.54390399 10.7807982,3.75913665 11.0336906,3.88677841 C11.0518639,3.89361636 11.3227603,3.79730988 11.4545455,3.69531577 C10.554315,2.35994413 8.89442461,1.32998206 7.12165336,1.27956522 C6.36602758,1.24380346 5.64260358,1.36037426 4.95138136,1.6292776 Z M7.57882202,4.25126761 C7.50192061,4.39171765 7.32998995,4.60592161 7.50192061,4.99859155 C7.53689481,5.07830856 7.86553331,5.26957616 8.48783611,5.57239437 C8.90783611,5.79028169 9.19723302,5.97905095 9.352506,6.33769556 C9.38879522,6.48450089 10.2288102,7.73893729 10.554315,7.88830986 C11.266484,8.21610366 11.6814456,8.58546049 11.7236108,9.02014085 C11.7566156,9.36038715 11.6024841,9.65353269 11.2612164,9.89957746 C10.3965685,10.698169 9.85662603,11.0963965 9.22727273,11.0412676 C9.06504832,11.373298 8.91735666,11.8399171 8.78419775,12.4411247 C11.0336906,11.709551 12.660188,9.66098592 12.7272727,7 C12.7272727,6.17028494 12.5662399,5.41770279 12.2441741,4.74225352 C11.7610755,5.02028169 11.2996671,5.14056338 10.8934699,5.02816901 C9.28971404,4.61371898 8.18483141,4.35475185 7.57882202,4.25126761 Z M3.87382556,2.2046872 C3.22392706,2.63054905 2.3649369,3.36590797 1.83223516,4.52712874 C1.83223516,4.52712874 2.34332848,4.2756487 2.75027247,4.32659092 C3.02604526,4.3687719 3.21016246,4.3718032 3.30262406,4.33568483 C3.70127416,4.13614247 3.98101415,4.02476449 4.14184402,4.00155091 C4.40175517,3.96926155 4.6938858,3.21414566 4.81568843,3.00569537 C4.6336352,2.89329274 4.16136805,2.80586751 3.87382556,2.2046872 Z"
													id="形状"
												></path>
											</g>
										</g>
									</g>
								</svg>
								<span className={cn(s.vam, s.mt10, s.ml10, s.tcor)}>
									资产名称：
								</span>
							</div>
							<div className={s.bor}>
								{data?.AlertTodayTopAsset?.note || '暂无数据'}
							</div>
						</div>
						<div className={s.mt30}>
							<div>
								<svg
									className={s.vam}
									width="13px"
									height="18px"
									viewBox="0 0 13 18"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									xlink="http://www.w3.org/1999/xlink"
								>
									<g
										id="页面-1"
										stroke="none"
										strokeWidth="1"
										fill="none"
										fillRule="evenodd"
									>
										<g
											id="告警列表-资产变动"
											transform="translate(-1048.000000, -324.000000)"
											fill="#999EA8"
										>
											<g
												id="3.Icon/1.线性/1.基础通用类/位置"
												transform="translate(1048.000000, 324.000000)"
											>
												<path
													d="M6.5,0 C10.0898509,0 13,3.30778704 13,6.55426087 C13,8.87380084 11.226551,11.9175248 7.67965306,15.6854329 L7.44056626,15.9377 C6.97102815,16.4298202 6.20776796,16.4730641 5.68704417,16.0548392 L5.58076118,15.9595334 L5.55943451,15.9377 C1.85314484,12.0531593 0,8.92534625 0,6.55426087 C0,3.30778789 2.91014913,0 6.5,0 Z M6.5,1.352 C3.75339925,1.352 1.3,3.92321759 1.3,6.55426087 C1.3,8.45652056 3.03333333,11.2451703 6.5,14.9202101 C9.96666667,11.2451703 11.7,8.45652056 11.7,6.55426087 C11.7,3.92321759 9.24660075,1.352 6.5,1.352 Z M6.5,3.25 C8.29492544,3.25 9.75,4.70507456 9.75,6.5 C9.75,8.29492544 8.29492544,9.75 6.5,9.75 C4.70507456,9.75 3.25,8.29492544 3.25,6.5 C3.25,4.70507456 4.70507456,3.25 6.5,3.25 Z M6.5,4.55 C5.42304474,4.55 4.55,5.42304474 4.55,6.5 C4.55,7.57695526 5.42304474,8.45 6.5,8.45 C7.57695526,8.45 8.45,7.57695526 8.45,6.5 C8.45,5.42304474 7.57695526,4.55 6.5,4.55 Z"
													id="形状"
												></path>
											</g>
										</g>
									</g>
								</svg>
								<span className={cn(s.vam, s.mt10, s.ml10, s.tcor)}>
									资产地址：
								</span>
							</div>
							<div className={s.bor}>
								{data?.AlertTodayTopAsset?.asset || '暂无数据'}
							</div>
						</div>
					</div>
				</div>
			</div>
		</Loading>
	);
}

Overview.propTypes = {
	className: PropTypes.string,
};

Overview.defaultProps = {
	className: s.overview,
};
